<template>
 <div id="SlotPayJp">
    <div class="card">
        <ul>
            <li v-for="(items,index) in data" v-if="index<4" :key="index">
                <div>
                    <img :src="items.cover" alt="">
                  
                </div>
                <span class="upData">{{items.upData}}</span>
                <div class="bottom-box">
                <span class="title-tt">{{items.title}}</span>
                <span>{{items.introduction}}</span>
                <div class="stdioCurrent">
                    <span class="iconfont " style="line-height: 21px;">&#xe769;</span>
                <span>{{items.studio}}</span>
                <span>{{items.current}}</span>
                </div>
                <span class="money">{{items.money}}</span>
                </div>
                </li>
            <!-- <li><img src="../../public/homeImg/recommGd.jpg" alt=""><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
            <li><img src="../../public/homeImg/recommGd.jpg" alt=""><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
            <li><img src="../../public/homeImg/recommGd.jpg" alt=""><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li> -->
        </ul>
    </div>
 </div>   
</template>

<script>
import '../../public/font_home/font-icon2/iconfont.js'
export default {
    props:{
        data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
        MV:{
            
        },
       
    },
     mounted() {
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#SlotPayJp{
    box-sizing: borser-box;
div,span,ul,li,img{
    font-size: 0px;
}
// margin: 10px;

    overflow: hidden;
     .card{
        // display: flex;
        box-sizing: border-box;
        ul{
              box-sizing: border-box; 
        
        }
      li{
        float: left;
        width: 50%;
        
        margin-top: 20px;
        position: relative;
        display: flex;
        img{
            width: 170px;
            height: 170px;
            border-radius: 5px;
            cursor:pointer;
        }
        span{
            font-size: 16px;
            display: block;
        }
        .upData{
            position: absolute;
            left: 2px;
            bottom: 4px;
            color: white;
        }
        .bottom-box{
            margin-left: 8px;
            span{
                padding: 2px 0;
                color: #9F9F9F;
            }
          .title-tt{
            font-weight: 700;
            font-size: 21px;
            padding: 21px 0;
            color: #444;
            cursor:pointer;
          }
          .title-tt:hover{
            color: #222;

          }
          .money{
            font-size: 22px;
            color: #EC4141;
          }
        }
        .stdioCurrent{
            display: flex;
            span{

            }
        }
      }
     }
   
   }
   
 

</style>